<template>
    <div style="width: 100%;" v-loading="docLoading">
        <div class="prodect_doc_dir">
            <el-breadcrumb>
                <el-breadcrumb-item> <span class="breadcrumbText" @click="dirCrumbpage(false)">{{docSubtypeText}}</span></el-breadcrumb-item>
                <el-breadcrumb-item v-for="item in dirCrumb"><span class="breadcrumbText" @click="dirCrumbpage(item)">{{item.dirName}}</span></el-breadcrumb-item>
            </el-breadcrumb>
            <div style="display:flex;width: 215px;justify-content: space-between;">
            <el-button type="primary" @click="folderVisible = true">新建目录</el-button>
            <singlefileUpload ref="upload" @uploadSave="uploadSave" @returnUrl="returnUrl" :ruleFormdocFilePath='uploadForm' @uploadListDel="uploadListDel">
                <template v-slot:openDialog>
                    <el-button >添加附件</el-button>
                </template>
            </singlefileUpload>
            </div>
            <!-- <el-button type="primary" @click="folderVisible = true">新建目录</el-button> -->
        </div>
        <div style="position: relative;margin-top: 24px;margin-bottom: 24px" :style="{height:curHeight+'px'}">
            <div class="document-right-content" v-if="switchType == 'column'">
                <div v-for="(item,index) in documentForm">
                    <prodectdoccolumn class="document-right-content-column" @dirClick="dirClick" @dirdelclick='loadList' :documentType="documentType" :functionIndex="functionIndex" :listQuery="listQuery" :item="item" :key="index">
                    </prodectdoccolumn>
                </div>
                <div v-if="documentForm.length == 0" style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <el-empty description="暂无数据"></el-empty>
                </div>
            </div>
        </div>
        <div>
            <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size" @pagination="loadList" />
        </div>

        <!-- 新建文件夹 -->
        <folder ref="folder" @updateTree="updateTree"></folder>
        <el-dialog :title="'新建目录'" :visible.sync="folderVisible" width="360px">
            <div class="rename-content">
                <span class="rename-title">目录名称</span>
                <el-input class="rename-input" v-model="form.name"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="folderVisible = false">取 消</el-button>
                <el-button type="primary" @click="dirsaveclick">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Vue from "vue";
import folder from "./folder.vue";
import prodectdoccolumn from "./prodectdoccolumn";
import { list, save as saveDoc, softDelete, subTaskDoc, update } from "@/api/doc.js";
import { list as favorList } from "@/api/favor.js";
import pagination from "@/components/Pagination/index.vue";
import permissionFunc from "../../../../utils/permission";
import { save } from "@/api/dir";
import singlefileUpload from "@/components/upload/singlefileUpload";
export default {
    props: ["docSubtype"],
    data() {
        return {
            uploadForm:[],
            dirCrumb: [],
            folderVisible: false,
            documentType: "产品",
            switchType: "column",
            documentForm: [],
            listQuery: {
                current: 1,
                size: 10,
                docType: "02",
                deleted: 0,
                isUpdate: 0,
                isMyCreate: 0,
                name: "",
                docSubtype: "02",
                // dirId: "",
            },
            total: 0,
            functionIndex: 0,
            docLoading: false,
            curHeight: null,
            dirType: "00",
            form: {
                name: "",
                parentDirId: "",
                dirType: "200",
                dirTypeId: "",
            },
            docSubtypeText:''
        };
    },
    components: {
        folder,
        // evclosure,
        prodectdoccolumn,
        singlefileUpload,
        pagination,
    },
    created() {
        this.form.dirTypeId=this.$route.query.prodId
        if (this.docSubtype == "01") {
            this.listQuery.docSubtype = "01";
            this.form.dirType = "201";
            this.docSubtypeText='产品资料'
        } else if (this.docSubtype == "02") {
            this.listQuery.docSubtype = "02";
            this.form.dirType = "202";
            this.docSubtypeText='产品交接'
        } else if (this.docSubtype == "03") {
            this.listQuery.docSubtype = "03";
            this.form.dirType = "203";
            this.docSubtypeText='用户项目'
            
        }
        this.loadList();
        // this.paginationList();
        // 修改更新list列表
        // this.$EventBus.$on("updateDoc", (data) => {
        //     var _this = this;
        //     console.log(data);
        //     console.log("我进来了");
        //     if (
        //         data.type == "del" ||
        //         data.type == "move" ||
        //         data.type == "removeIsMark" ||
        //         data.type == "recovery"
        //     ) {
        //         _this.documentForm.forEach(function (item, index) {
        //             if (item.docId == data.data.docId) {
        //                 _this.documentForm.splice(index, 1);
        //                 _this.$forceUpdate();
        //                 console.log(_this.documentForm);
        //             }
        //         });
        //     } else if (data.type == "update") {
        //         _this.documentForm.forEach(function (item, index) {
        //             if (item.docId == data.data.docId) {
        //                 _this.documentForm[index] = data.data;
        //                 _this.$forceUpdate();
        //             }
        //         });
        //     } else if (data.type == "save") {
        //         _this.loadList();
        //     }
        // });
    },
    beforeDestroy() {
        this.$EventBus.$off("updateDoc");
    },
    mounted() {
        this.comeIn();
        this.beforeMount();
    },
    methods: {
        uploadListDel(index) {
            this.uploadForm.splice(index, 1);
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        // 保存附件
        uploadSave(val) {
            console.log("data--", val);
            let _this = this;
            let data = {
                // name: val.name,
                docFilePath: this.uploadForm,
                docType: '02',
                docTypeId: this.$route.query.prodId,
                docSubtype:this.listQuery.docSubtype,
                dirId:this.form.parentDirId

                // status: "00",
            };
            saveDoc(data).then((res) => {
                console.log(res);
                this.loadList();
                _this.$refs.upload.sucessClick();
                this.uploadForm=[]
            });
        },
        dirCrumbpage(data) {
            if (data == false) {
                this.$delete(this.listQuery, "dirId");
                this.loadList();
            }else{
                this.listQuery.dirId=data.dirId
                this.loadList();
            }
        },
        // addProdectDoc()
        dirsaveclick() {
            save(this.form).then((res) => {
                this.folderVisible = false;
                this.form.name = ''
                this.loadList();
            });
        },
        beforeMount() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    var h =
                        document.documentElement.clientHeight ||
                        document.body.clientHeight;
                    this.curHeight = h - 250; //减去页面上固定高度height
                })();
            };
        },
        comeIn() {
            console.log("222");
            var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            this.curHeight = h - 250; //减去页面上固定高度height
        },
        paginationList() {
            var _this = this;
            if (_this.functionIndex == 2) {
                _this.favorList();
            } else {
                _this.loadList();
            }
        },
        // 刷新树
        updateTree(data) {
            console.log(data);
            this.$EventBus.$emit("eventName", data);
        },
        // 查询list
        loadList() {
            var _this = this;
            _this.docLoading = true;
            list(_this.listQuery, false)
                .then((res) => {
                    console.log(res);
                    if (res.data.docData.length > 0) {
                        res.data.docData.forEach(function (item) {
                            item.type = "doc";
                        });
                    }
                    if (res.data.dirData.length > 0) {
                        res.data.dirData.forEach(function (item) {
                            item.type = "dir";
                        });
                    }
                    _this.documentForm = res.data.dirData.concat(
                        res.data.docData
                    );
                    _this.total = res.data.total;
                    _this.dirCrumb = res.data.dirCrumb;
                    if(_this.dirCrumb.length==0){
                         _this.form.parentDirId=''
                    }else{
                        _this.form.parentDirId= _this.dirCrumb[_this.dirCrumb.length-1].dirId
                        
                    }
                    _this.docLoading = false;
                    // _this.$delete(this.listQuery, "docSubtype");
                })
                .catch((error) => {
                    _this.docLoading = false;
                });
        },
        // 名字搜索
        queryClick(data) {
            console.log(data);
            this.resetClick();
            this.listQuery.name = data;
            this.loadList();
        },
        // 重置listquery
        resetClick() {
            // if (this.documentType == '合同') {
            //   this.listQuery.docType = '05'
            // } else {
            //
            // }
            this.listQuery.docType = "";
            this.functionIndex = 0;
            this.listQuery.deleted = 0;
            this.listQuery.isUpdate = 0;
            this.listQuery.isMyCreate = 0;
            this.listQuery.current = 1;
            this.listQuery.size = 20;
            this.listQuery.dirId = "";
            this.listQuery.name = "";
        },
        // 合同企业文档新增
        addClick() {
            var data = {
                docType: this.listQuery.docType,
                dirId: this.listQuery.dirId,
                conteractType: this.conteractType,
            };
            if (this.documentType == "合同") {
                this.$router.push({
                    path: "/contract/add",
                    query: { data: JSON.stringify(data) },
                });
            } else {
                this.$router.push({
                    path: "/document/add",
                    query: { data: JSON.stringify(data) },
                });
            }
        },
        //  点击文件夹
        dirClick(data) {
            console.log(data);
            // this.resetClick();
            // this.listQuery.docType = data.dirType;
            // this.dirType = data.dirType;
            this.listQuery.dirId = data.dirId;
            // this.form.parentDirId = data.dirId;
            this.loadList();
        },
        selectClick() {
            this.loadList();
        },
        docSelectClick() {
            this.loadList();
        },
    },
};
</script>

<style scoped>
.document-right-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.document-right-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.document-right-header-left-input {
    width: 220px;
}

.document-right-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.document-right-header-right-switch {
    width: 72px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

.document-right-header-right-switch-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dadee3;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.document-right-header-right-switch-itemTwo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dadee3;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.switch-bg {
    background-color: #677e9f;
    border-color: #677e9f;
}

.switch-color {
    color: #677e9f !important;
}

.document-right-header-right-switch-item-title {
    font-size: 14px;
    color: white;
}

.document-right-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*margin-top: 20px;*/
}

.document-right-content-column {
    margin-bottom: 20px;
    margin-right: 20px;
}
.prodect_doc_dir {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.breadcrumbText{
    cursor: pointer;
}
.rename-title{
    display: block;
    margin-bottom: 10px;
}
</style>
